<template>
  <div class="page_container">
    <el-form :inline="true" :model="searchForm" ref="searchForm" @keyup.enter.native="search" :size="size">
      <el-form-item label="产品名称" prop="title">
        <el-input v-model="searchForm.title" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="评论内容" prop="context">
        <el-input v-model="searchForm.context" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
      <el-button @click="resetSearch" icon="el-icon-refresh" :size="size">重置</el-button>
    </el-form>
    <div class="tableBox">
      <el-table :data="dataList" border style="width: 100%;" height="100%">
        <el-table-column prop="context" header-align="center" align="center" label="评论内容" min-width="200"></el-table-column>
        <el-table-column header-align="center" align="center"
                         prop="title"
                         min-width="100" label="旅游产品">
        </el-table-column>
        <el-table-column prop="userName" header-align="center" align="center" label="评论用户" width="130"></el-table-column>
        <el-table-column prop="pushTime" header-align="center" align="center" label="评论时间" width="130"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center"
                         width="100" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="replyAppraise(row)">回复</el-button>
            <el-button type="text" size="small" style="color: orangered" @click="deleteAppraise(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="searchForm.current" :limit.sync="searchForm.size" @pagination="getDataList" />

  </div>
</template>

<script>
  import api from '../../../utils/api'
  import { mapGetters } from 'vuex'
  import Pagination from '@/components/Pagination'
  export default {
    name: 'managerOrders',
    components: {
      Pagination,
    },
    data () {
      return {
        searchForm: {
          title: '',
          context: '',
          pageNum: 1,
          pageSize: 10,
        },
        dataList: [],
        total: 0,
        dialogForm: {
          id: '',
          payMoney: '',
          oriMoney: '',
          payStatus: '',
          orderStatus: '',
          isValid: ''
        },
        curEditRow: {},
        isDialogShow: false,
        isDialogBuFenRefundShow: false,
        isTracesDialogShow: false
      }
    },
    computed: {
      ...mapGetters(['size']),
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        api.queryAppraisePage(this.searchForm).then((res) => {
          if (api.SUCCESS.includes(res.code)) {
            let {data, total} = res.data
            this.dataList = data
            this.total = Number(total)
          }
        }).catch((res) => {
        })
      },
      // 重置
      resetSearch () {
        this.$refs['searchForm'].resetFields()
      },
      // 查询
      search () {
        this.searchForm.pageNum = 1
        this.getDataList()
      },
      closeDialog () {
        this.isDialogShow = false
      },
      // 删除评论
      deleteAppraise(row) {
        this.delConfirm().then(res => {
          api.deleteAppraise({appraiseId: row.appraiseId}).then(res => {
            this.$message.success('删除成功')
            this.getDataList()
          })
        })
      },
      replyAppraise (row) {
        this.$prompt('请输入内容', '回复评论', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea'
        }).then(({ value }) => {
          let params = {
            appraiseId: row.appraiseId,
            context: value
          }
          api.replyAppraise(params).then(res => {
            this.$message.success('回复成功')
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      viewTraces (row) {
        Object.assign(this.curEditRow, row)
        this.isTracesDialogShow = true
      }
    }
  }
</script>

<style lang="scss">
  .yundan_edit_dia {
    .el-radio__input.is-checked .el-radio__inner {
      border-color: #409eff;
      background-color: #409eff;
    }
  }
  .btn_traces {
    width: 58px;
    border: 1px solid #409eff;
    color: #409eff;
    margin: 0 auto;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    border-radius: 2px;
    cursor: pointer;
  }
</style>
